<template>
    <div class="app">
        <div class="nav">
            <ul class="nav_ul" >
                <li @click="getimagesList(0)">全部</li>

                <li v-for="dataitem in categoricalDataList" @click="getimagesList(dataitem.id)">{{dataitem.title}}</li>
                <!-- <li>{{dataitem.id}}</li> -->
            </ul>
        </div>
        <!-- 图片的列表 -->
        <div class="imglist">
            <ul class="nav_ul">
                <li v-for="item in imagesList" class="imglist_li">
                  <router-link  v-bind='{to:"/photo/photoshow/"+item.id}'>
                      <img v-lazy="item.img_url">
                      <div class="imglist_content">{{item.seo_title}}</div>
                  </a>  
               </li>
            </ul>
        </div>
    </div>
   
</template>
<script>
    //引入一个swipe滑动，用来实现滑动效果
    import swipe from '../../../static/js/swipe.js'
    import common from '../../kits/common.js';
    import { Toast,Indicator,Lazyload } from 'mint-ui'; //导入mint-ui中的提示组件
   

    export default{
        created(){
            //获得分类的数据
            this.getCategoricalData();
            this.getimagesList(0);

        },
        updated(){
             this.setListWidth();
             this.setsWipe();
           
        },
        data(){
            return {
                categoricalDataList:[],
                length:0,
                imagesList:[]
            }
        },
        methods:{
            //设置弹簧与滑动
            setsWipe(){
                    swipe.iScroll({
                    /*1.你想对谁进行滑动--dom -js：你得传递需要进行滑动的内容的父容器*/
                    swipeDom:document.querySelector(".nav"),
                    /*2.滑动的方法：x/y*/
                    swipeType:"x",
                    /*3.弹簧区间：*/
                    swipeDistance:200
                 });
            },
            //获得分类的数据
            getCategoricalData(){
                let url = common.apihost +'/api/getimgcategory';
                this.$http.get(url).then(res=>{
                    if(res.body.status!==0){
                       return Toast(res.body.message);
                    }
                    this.categoricalDataList = res.body.message;

                   this.length = this.categoricalDataList.length;
                
                },res=>{
                    console.log('数据获得失败');
                })
            },
            //获得图片列表的数据
            getimagesList(cateid){
                //使数据前用打开提示
                Indicator.open('正在加载中...');
                this.imagesList=[];
                let url = common.apihost + '/api/getimages/'+cateid;
                this.$http.get(url).then(res=>{
                    if(res.body.status!==0){
                         Toast(res.body.message);
                         return
                    }
                    this.imagesList = res.body.message;
                    let imghost = common.imghost;
                   

                    
                    let temlist = this.imagesList;
                    //这里是在拼接地址
                    for (var i = 0; i < temlist.length; i++) {
                        temlist[i].img_url = imghost+temlist[i].img_url;
                        

                    }
                     //获得数据完成之后关闭
                    Indicator.close();



                },res=>{
                    console.log('数据获得失败');
                })



            },
            //动态设置当前的li导航的宽度
            setListWidth(){
                 //设置Li的长度
                    let li = document.querySelector('.nav_ul li');
                    let ul = document.querySelector('.nav_ul');
                    let width = (this.categoricalDataList.length+1) * li.offsetWidth+10;
                    ul.style.width = width+"px";
            }
            // 
        }
    }
</script>
<style scoped>
    image[lazy=loading] {
      width: 40px;
      height: 300px;
      margin: auto;
    }
    .nav {
        margin-top: -12px;
        width: 100%;
        overflow: hidden;
        

    }
    .nav .nav_ul li{
        float: left;
        height: 45px;
        line-height: 45px;
        width: 100px;
        /*border:1px solid #eee;*/
        background: #9ED5FF;
       
    }
    .imglist .imglist_li {
        position: relative;
    }
    .imglist .imglist_li img{
        width: 100%;
    }
    .imglist .imglist_li a{

        width: 100%;
        height: 100%;
    }
    .imglist .imglist_li .imglist_content{
        background: rgba(0,0,0,0.5);
        position: absolute;
        width: 100%;
        height: 20%;
        bottom:7px;
        left:0px;
        padding: 20px;
        text-align: left;
    }
    .imglist .imglist_li .imglist_content p{
        color: #ccc;
    }
</style>